<template>
  <view class="job-item" @click="handleItem(item)">
    <view class="item-top">
      <view class="item-top_left">
        <text class="title" :class="{ top: item.is_topping }">{{
          item[props.title]
        }}</text>
        <text v-if="item.is_topping" class="icon icon-top"></text>
      </view>
      <text class="salary">{{ item[props.salary] }}</text>
    </view>
    <view class="item-middle">
      <view class="item-middle-line">
        <view v-if="item[props.gznum]" class="item-middle-line-item"
          ><text class="icon icon-gznum"></text>
          <text> {{ item[props.gznum] }}</text></view
        >
        <view class="item-middle-line-item"
          ><text class="icon icon-edu"></text
          ><text>{{ item[props.edus] || "学历不限" }}</text></view
        >
        <view v-if="item[props.jobtypes]" class="item-middle-line-item"
          ><text class="icon icon-job"></text
          ><text>{{ item[props.jobtypes] }}</text></view
        >

        <view class="region-item" ><text class="icon icon-region"></text
          > <text class="region" >{{ item[props.region] }}</text> </view>

      </view>

      <view class="item-middle-line cname">
        <text class="cname-name">{{ item[props.cname] }}</text>
        <text v-if="item[props.yuangong]" class="yuangong">{{
          item[props.yuangong]
        }}</text>
      </view>
    </view>
    <view class="item-bottom">
      <!-- <text class="time">{{ item[props.time].split(" ")[0] }}</text> -->
      <view class="fldy">
        <text
          class="fldy-item"
          v-for="(flItem, index) in item[props.fldy]"
          :key="index"
        >
          {{ flItem }}
        </text>
      </view>
      
    </view>

    <view class="item-person-info" @click.stop="toChat">
      <image class="header-pic" :src="personPic" />
      <view class="item-person-info-name">{{personName}}</view>
      <view class="item-person-info-position">{{personJob}}</view>
      <view class="item-person-info-time">{{personTime}}</view>
    </view>
    <slot></slot>
  </view>
</template>

<script>

import { showDelayToastTip, httpToHttps } from "@/utils/handle";
import IMEventHandler from "@/utils/im";
export default {
  props: {
    positionId: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    zpid: {
      type: [String, Number],
      default: "",
    },
    props: {
      type: Object,
      default() {
        return {
          title: "jtzw",
          salary: "salary",
          cname: "cname",
          time: "time",
          region: "region",
          fldy: "fldy",
          gznum: "gznum",
          edus: "edus",
          jobtypes: "jobtypes",
          yuangong: "yuangong",
          updatetime:"updatetime",
          personJobInfo:"personJobInfo",
        };
      },
    },
    activityId: {
      type: String,
      default: '',
    },
    isEnterprisesActivityItem: {
      type: Boolean,
      default: false,
    },
  },
  
  data() {
    return {
      personName: "",
      personJob:"",
      personTime:"",
      personPic:"",
      chatId:"",
      updatetime:"",
    };
  },
  watch: {
    item: {
      handler(val) {
        //console.log('watch item',val);
        if (val) {
           if(val.personJobInfo){
              this.personName = val.personJobInfo.iname;
              this.personJob = val.personJobInfo.pnames;  
              this.personTime = val.personJobInfo.activeTime; 
              this.personPic = httpToHttps(val.personJobInfo.pic); 
              this.chatId = val.personJobInfo.jgimid;
           }
        }
      },
      immediate: true,
      deep:true,
    },
  },
  methods: {
     
    toChat() {
      
      var personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (!personId) {
       
        return;
      }
      console.log('chatId',this.chatId);
      if(!this.chatId || this.chatId ==""){ 
        showDelayToastTip("该用户没有IM账号", 50); 
        return true;
      }
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        let isFirst = true;
        new IMEventHandler(() => {
          if (isFirst) {
            isFirst = false;
            uni.hideLoading();
            uni.navigateTo({
              url: "/pagesSub/message/chat/index?chatId=" + this.chatId,
            });
          }
        });
      } else {
        uni.navigateTo({
          url: "/pagesSub/message/chat/index?chatId=" + this.chatId,
        });
      }
    },

    handleItem(item) {
      console.log("🚀 ~ handleItem6666 ~ item:", item)

      if (this.isEnterprisesActivityItem) {
        console.log("🚀 ~ handleItem ~ 1312321313131")
        uni.navigateTo({
          url:"/pagesSub/public/jobDetail/index?jobId=" + item.id + "&form=enterprisesActivityHoverBtn",
        });
         return;
      }

      uni.navigateTo({
        url:
          "/pagesSub/public/jobDetail/index?jobId=" +
          (this.zpid || item.id || item.position_id) +
          "&positionId=" +
          this.positionId + '&activityId=' + this.activityId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-jdetail: $img-base + "jdetail/";

.region-item{
  display: flex;
  flex-direction: row; 
  display: inline-flex;
  align-items: center;
  position: absolute;
  right: 32px;
}
.update-time-item{
  display: flex;
  flex-direction: row; 
  text-align: right;
  flex: 1;
}
.job-item {
  margin-bottom: 24rpx;
  padding: 32rpx;
  background: $uni-bg-color;
  border-radius: 20rpx;
  box-shadow: 0 17rpx 15rpx 5rpx #f3f3f3;
  .item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    &_left {
      display: inline-flex;
      align-items: center;
      flex: 1;
      width: 0;
      margin-right: 24rpx;
    }
    .title {
      display: inline-block;
      max-width: 100%;
      line-height: 1.5;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      &.top {
        max-width: calc(100% - 50rpx);
      }
    }
    .salary {
      flex-shrink: 0;
      color: $u-type-primary;
    }
    .icon-top {
      width: 28rpx;
      height: 28rpx;
      margin-left: 12rpx;
      margin-top: -2rpx;
      background: url($img-base + "common/top_text.png") no-repeat center / 100%
        100%;
      vertical-align: text-top;
    }
  }
  .item-middle {
    margin-top: 28rpx;
    font-size: $uni-font-size-sm;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    &-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 24rpx;
      color: $uni-text-color-999;
      &.cname {
        display: flex;
        font-size: $uni-font-size-base;

        .cname-name {
          flex: 1;
          width: 0rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .yuangong {
          flex-shrink: 0;
          margin-left: 24rpx;
        }
      }
      &-item {
        display: inline-flex;
        align-items: center;
        margin-right: 16rpx;
        padding: 4rpx 10rpx;
        border-radius: $uni-border-radius-sm;
        color: #666666;
        background-color: $uni-bg-color-border-f1;
      }
    }
    .icon {
      display: inline-block;
      width: 23rpx;
      height: 23rpx;
      margin-right: 6rpx;

      &-gznum {
        background: url($img-base-jdetail + "exp.png") no-repeat center / 100%
          100%;
      }
      &-edu {
        background: url($img-base-jdetail + "edu.png") no-repeat center / 100%
          100%;
      }
      &-job {
        background: url($img-base-jdetail + "job-type.png") no-repeat center /
          100% 100%;
      }
      &-region {
        background: url($img-base-jdetail + "region.png") no-repeat center /
          100% 100%;
      }
    }
  }
  .item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-999;
    .fldy {
      margin: 10rpx 0 0 0;
      &-item {
        display: inline-block;
        margin: 0 18rpx 8rpx 0;
        padding: 4rpx 10rpx;
        border-radius: $uni-border-radius-sm;
        color: $u-type-primary;
        background-color: $bg-color-button;
      }
    }
    .region {
      flex-shrink: 0;
      max-width: 210rpx;
      text-align: right;
    }
    .time {
      margin-right: 16rpx;
    }
  }

  // 发布人信息
  .item-person-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    .header-pic{ 
      //background: yellow;
      width: 66rpx;
      height: 66rpx;
      //margin-left: 32rpx;
      border-radius: 50%;
    }
    &-name{
      //flex: 1;
      margin-left: 10px;
    }
    &-position{
      //flex: 1.5;
      margin-left: 10px;
    }
    &-time{
      //flex: 3;
      margin-left: 10px;
    }
  }
}
</style>
